import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm } from 'antd'
import { Page } from 'components'
import queryString from 'query-string'
import { ListMenuType } from 'utils/enums'
import SelfEvent from 'utils/SelfEvent'
import List from './List'
import Filter from './Filter'

const event = new SelfEvent()

const TransactionStatistics = ({ location, dispatch, transactionStatistics, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, pagination, userListAll, codeListAll } = transactionStatistics
  const { pageSize } = pagination
  const listProps = {
    dataSource: list,
    loading: loading.effects['transactionStatistics/list'],
    pagination,
    location,
    columns: [
      {
        title: 'First Name',
        dataIndex: 'firstName',
        key: 'firstName',
      },
      {
        title: 'Last Name',
        dataIndex: 'lastName',
        key: 'lastName',
      },
      {
        title: 'Middle Name',
        dataIndex: 'middleName',
        key: 'middleName',
      },
      {
        title: 'AmountLocalSum',
        dataIndex: 'amountLocalSum',
        key: 'amountLocalSum',
      },
      {
        title: 'FromAmountSum',
        dataIndex: 'fromAmountSum',
        key: 'fromAmountSum',
      },
      {
        title: 'ToAmountSum',
        dataIndex: 'toAmountSum',
        key: 'toAmountSum',
      },
      {
        title: 'FromCurrencyCode',
        dataIndex: 'fromCurrencyCode',
        key: 'fromCurrencyCode',
      },
      {
        title: 'ToCurrencyCode',
        dataIndex: 'toCurrencyCode',
        key: 'toCurrencyCode',
      },
    ],
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
  }

  event.once('excel', (filter) => {
    console.log(filter)
    dispatch({
      type: 'transactionStatistics/excel',
      payload: filter,
    })
  })

  const filterProps = {
    event,
    userListAll,
    codeListAll,
    filter: {
      ...{
        byCustomerId: true,
        byFromCurrencyCode: true,
        byToCurrencyCode: true,
        three: false,
      },
      ...location.query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        search: queryString.stringify({
          ...value,
          page: 1,
          pageSize,
        }),
        // query: {
        //   ...value,
        //   page: 1,
        //   pageSize,
        // },

      }))
    },
    onSearch (fieldsValue) {
      fieldsValue.keyword.length ? dispatch(routerRedux.push({
        pathname: '/customer',
        query: {
          field: fieldsValue.field,
          keyword: fieldsValue.keyword,
        },
      })) : dispatch(routerRedux.push({
        pathname: '/customer',
      }))
    },
  }

  return (
    <Page inner>
      <Filter {...filterProps} />
      <List {...listProps} />
    </Page>
  )
}

TransactionStatistics.propTypes = {
  transactionStatistics: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ transactionStatistics, loading }) => ({ transactionStatistics, loading }))(TransactionStatistics)
